<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2022-11-24 11:41:49
 * @LastEditTime: 2025-06-19 21:30:02
 * @LastEditors: sueRimn
-->
<template>
  <view class="banner">
    <view v-if="list.length > 0">
      <swiper :indicator-dots="false" autoplay circular class="swiper" @change="onChange">
        <swiper-item v-for="item in list" :key="item.bannerId">
          <view @click="urlJump(item)" class="banner-warp">
            <image class="img" :src="item.image" mode="scaleToFill" />
          </view>
        </swiper-item>
      </swiper>

      <view class="indicator">
        <view v-for="(item, index) in list" :key="item.bannerId" :class="current === index ? 'active' : ''" class="dot" />
      </view>
    </view>
    <view v-else>
      <image class="img" :src="defaultImage" mode="scaleToFill" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: { type: Array, default: [] }
  },

  data() {
    return {
      current: 0,
      defaultImage:"https://image.chushouya.com/uploads/file/20250619/20250619195314_122.png"
    }
  },


  methods: {
    onChange(e) {
      const { current } = e.detail
      this.current = current
    }
  }
}
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  width: 100%;
  height: 260rpx;
  margin: 30rpx 0 0rpx 0;
  padding: 0rpx 0rpx 0;
  text-align: center;

  .swiper {
    height: 260rpx;
  }

  .banner-warp {
    width: 690rpx;
    margin: 0 auto;
  }

  .img {
    width: 690rpx;
    height: 260rpx;
    margin: 0 auto;
    display: block;
  }

  .indicator {
    position: absolute;
    z-index: 1;
    padding: 0 62rpx;
    bottom: 10rpx;
    left: 0;
    right: 0;
    width: 100%;
    text-align: right;

    .dot {
      display: inline-block;
      width: 20rpx;
      height: 6rpx;
      background: #F2F5FA;
      opacity: 0.7;
      margin: 0 8rpx;

      &.active {
        opacity: 1;
        background: var(--hui-color-primary);
      }
    }
  }
}
</style>
